<template>
  <div class="index">
    <!-- 搜索框 -->
    <div @click="toSearch">
      <van-search placeholder="请输入搜索关键词" v-model="searchValue" />
    </div>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in swipeImages" :key="index">
        <a :href="item.link">
          <van-image :src="item.image" />
        </a>
      </van-swipe-item>
    </van-swipe>
    <!-- 首页分类 -->
    <van-grid :column-num="4" :border="false">
      <van-grid-item v-for="value in classList" :key="value.id">
        <a href="/">
          <van-image :src="value.image"></van-image>
        </a>
      </van-grid-item>
    </van-grid>
    <!-- 标签页 -->
    <van-tabs v-model="active" :sticky="true" @change="sceneto">
      <van-tab title="精品专场">
        <!-- 宫格 -->
        <van-grid :column-num="2" :border="false">
          <van-grid-item v-for="item in sceneList" :key="item.id">
            <div>
              <div>
                <van-image :src="item.image"></van-image>
              </div>
              <div>
                <span style="color:#ff464e; font-size:16px;">{{item.price}}</span>
                <span style="color:#bbb; font-size:10px;">{{item.old_price}}</span>
                <br />
                <span class="title_span">
                  <p>{{item.name}}</p>
                </span>
              </div>
            </div>
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="精选单品">
        <!-- 宫格 -->
        <van-grid :column-num="2" :border="false">
          <van-grid-item v-for="item in sceneList" :key="item.id">
            <div @click="todetails(item.id)">
              <div>
                <van-image :src="item.image"></van-image>
              </div>
              <div>
                <span style="color:#ff464e; font-size:16px;">{{item.price}}</span>
                <span style="color:#bbb; font-size:10px;">{{item.old_price}}</span>
                <br />
                <span class="title_span">
                  <p>{{item.name}}</p>
                </span>
              </div>
            </div>
          </van-grid-item>
        </van-grid>
      </van-tab>
    </van-tabs>
    <!-- 回到顶部 -->
    <vueToTop class="btntop" :type="7" right="30" bottom="70" top="1000" size="35" duration="500"></vueToTop>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchValue: "", // 搜索框值
      swipeImages: [], // 轮播图图片
      classList: [], // 分类数据
      active: 0, // 标签页选中项
      sceneList: [] // 精品专场数据
    };
  },
  methods: {
    // 首页轮播图
    getSwipe() {
      this.$http.get("/index_swipe").then(res => {
        this.swipeImages = res.data.data;
      });
    },
    // 首页分类
    getIndexClass() {
      this.$http.get("/index_class").then(res => {
        this.classList = res.data.data;
      });
    },
    // 精品专场
    getScene() {
      this.$http.get("/index_scene").then(res => {
        res.data.data.forEach(v => {
          this.sceneList.push({
            id: v.id,
            image: v.scene_image,
            price: v.scene_title,
            name: v.scene_details
          });
        });
      });
    },
    // 切换精选单品
    sceneto() {
      if (this.active == 0) {
        this.sceneList = [];
        this.getScene();
      } else if (this.active == 1) {
        this.sceneList = [];
        this.$http.get("/index_shop").then(res => {
          res.data.data.forEach(v => {
            this.sceneList.push({
              id: v.id,
              image: v.shop_image,
              price: "￥" + v.shop_price,
              old_price: "￥" + v.shop_old_price,
              name: v.shop_name
            });
          });
        });
      }
    },
    // 点击搜索框跳转搜索页
    toSearch() {
      this.$router.push({ path: "/start_search", query: { name: "index" } });
    },
    // 跳转到商品详情页
    todetails(id) {
      this.$router.push({ path: "/shopdetails", query: { id: id } });
    }
  },
  created() {
    this.getSwipe();
    this.getIndexClass();
    this.getScene();
  }
};
</script>
<style lang="less">
.index {
  margin-bottom: 50px;
  .btntop {
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0px -1px 3px #888 inset;
  }
  .title_span p {
    color: #999;
    overflow: hidden; /*超出部分隐藏*/
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    white-space: nowrap; /*规定段落中的文本不进行换行 */
    width: 150px; /*需要配合宽度来使用*/
  }
}
</style>